<template>
	<div class="mv-list">
		<div class="mv-tab">		
			<div :class="{active:isActive == 0}" @click="selectTab(0)">全球</div>
			<div :class="{active:isActive == 1}" @click="selectTab(1)">内地</div>
			<div :class="{active:isActive == 5}" @click="selectTab(5)">日本</div>
			<div :class="{active:isActive == 3}" @click="selectTab(3)">欧美</div>
			<div :class="{active:isActive == 2}" @click="selectTab(2)">港台</div>
			<div :class="{active:isActive == 4}" @click="selectTab(4)">韩国</div>
		</div>
		<!-- <video ref="video" class="mv-video" v-show="videoShow" controls></video> -->
		<Scroll class="mv" :data="mvList" ref="scroll">
			<!-- mv列表 -->
			<ul class="mvList-ul">
				<li class="mvList-li" v-for="(item,index) in mvList" :key="index" @click="selectItem(item)">
					<div class="mvList-cover">
						<img v-lazy="item.video_info.cover_pic" alt="">
					</div>
					<div class="mvList-content">
						<!-- mvTitle -->
						<div class="mvList-content-title">{{item.video_info.name}}</div>
						<!-- mvDesc -->
						<div class="mvList-content-desc">{{item.video_info.singers[0].name}}</div>
					</div>
				</li>
			</ul>
			<!-- 没有数据时显示加载状态 -->
			<div class="loading" v-show="mvList.length===0 ? 1:0">
				<Loading />
			</div>
			
		</Scroll>
		<router-view></router-view>
	</div>
</template>

<script>
import Loading from 'base/loading/Loading'
import Scroll from 'base/scroll/Scroll'
import { mapMutations } from 'vuex'
import { getMvLists } from 'api/mv'
import { ERR_OK } from 'api/config'

export default {
	components: {
		Loading,
		Scroll
	},
	data() {
		return {
			mvList: [],
			isActive: 0
		}
	},
  created() {
		this._getMvList(0)
  },
  methods: {
    _getMvList(type) {
      var that = this
      getMvLists(type).then(res => {
        if (res.code === ERR_OK) {
					that.mvList = res.request.data.rank_list
        }
      })
    },
    selectItem(item) {
			const _vid = item.video_info.vid
			this.$router.push({
				path: `/mv/${_vid}`
			})
			this.setMvId(_vid)
			this.setMvInfos(this.mvList)
		},
		selectTab(type) {
			this.isActive = type
			this._getMvList(type)
		},
		...mapMutations({
			setMvId: 'SET_CURRENT_MV_ID',
			setMvInfos: 'SET_MV_INFOS'
		})
  }
}
</script>

<style lang="scss" scoped>
@import "@/assets/css/mixin.scss";
/* .mv-list {
	width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: $background-color;
  z-index: 301;
} */
.mv-tab {
	display: flex;
	width: 100%;
	height: rem(40);
	justify-content: space-around;
}
.mv-tab div {
	width: rem(40);
	height: rem(40);
	color: #fff;
	font-size: rem(16);
	text-align: center;
	line-height: rem(40);
}
.mv-tab div.active {
	color: #ffcd32;
	font-size: rem(18);
}

.mv {
  width: 100vw;
  height: 80vh;
  overflow: hidden;
}

.mvList-ul .mvList-li {
	display: flex;
  height: rem(80);
  padding: 0 rem(20) rem(20) rem(20);
}
.mvList-ul .mvList-li:first-child {
  padding-top: rem(20);
}
.mvList-ul .mvList-li:last-child {
  padding-bottom: rem(70);
}
.mvList-li .mvList-cover {
	flex: 0 0 rem(160);
  width: rem(160);
  height: rem(80);
	overflow: hidden;
}
.mvList-li .mvList-cover img {
  width: rem(145);
  height: rem(80);
	border-radius: rem(5);
}
.mvList-li .mvList-content {
	display: flex;
	height: rem(80);
	/* padding-left: rem(70); */
	flex-direction: column;
  overflow: hidden;
}
.mvList-content .mvList-content-title {
	height: rem(30);
	padding: rem(5) 0 rem(15);
	overflow: hidden;
	color: #fff;
	font-size: rem(15);
}
.mvList-content .mvList-content-desc {
	color: rgba(255, 255, 255, 0.486);
	font-size: rem(14);
}
.loading {
  position: fixed;
  width: 100%;
  top: 50%;
  transform: translateY(-50%);
}
</style>